<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { AddressItem, OrderPre } from "@/types/orderTypes/orderTypes.ts";
import { createMedicalOrderAPI, getAddressListAPI, getMedicalOrderPrePI } from "@/api/orderApi/orderApi.ts";
import { Toast } from "vant";
import PaySheet from "@/components/lib/PaySheet.vue";

const route = useRoute();


const loading = ref(false);

const orderId = ref("");

const show = ref(false);

const orderPre = ref<OrderPre>();


const address = ref<AddressItem>();

const loadOrderPre = async () => {
   const { data } = await getMedicalOrderPrePI(route.query.id as string);
   orderPre.value = data;
};

const loadAddress = async () => {
   const addRes = await getAddressListAPI();
   if (addRes.data.length) {
      const defAddress = addRes.data.find((item) => item.isDefault === 0);
      if (defAddress) {
         address.value = defAddress;
      } else {
         address.value = addRes.data[0];
      }
   }
};

const submit = async () => {
   if (!address.value?.id) return Toast.fail("请选择收货地址");
   if (!orderPre.value?.id) return Toast.fail("未找到处方");
   // 没有生成订单ID
   if (!orderId.value) {
      try {
         loading.value = true;
         const res = await createMedicalOrderAPI({
            id: orderPre.value?.id,
            addressId: address.value?.id,
            couponId: orderPre.value.couponId,
         });
         orderId.value = res.data.id;
         loading.value = false;
         // 打开支付抽屉
         show.value = true;
      } catch (e) {
         loading.value = false;
      }
   } else {
      show.value = true;
   }
};

onMounted(async () => {
   loadOrderPre();
   loadAddress();
});
</script>


<template>
   <div class="order-pay-page" v-if="orderPre && address">
      <nav-bar title="药品支付" />
      <div class="order-address">
         <p class="area">
            <van-icon name="location" />
            <span>{{ address.province + address.city + address.county }}</span>
         </p>
         <p class="detail">{{ address.addressDetail }}</p>
         <p>
            {{ address.receiver }}
            {{ address.mobile.replace(/^(\d{3})\d+(\d{4})$/, "\$1****\$2") }}
         </p>
      </div>
      <div class="order-medical">
         <div class="head">
            <h3>优医药房</h3>
            <small>优医质保 假一赔十</small>
         </div>
         <div class="item van-hairline--top" v-for="med in orderPre.medicines" :key="med.id">
            <img class="img" :src="med.avatar" alt="" />
            <div class="info">
               <p class="name">
                  <span>{{ med.name }}</span>
                  <span>x{{ med.quantity }}</span>
               </p>
               <p class="size">
                  <van-tag v-if="med.prescriptionFlag === 1">处方药</van-tag>
                  <span>{{ med.specs }}</span>
               </p>
               <p class="price">￥{{ med.amount }}</p>
            </div>
            <div class="desc">{{ med.usageDosag }}</div>
         </div>
      </div>
      <div class="order-detail">
         <van-cell-group>
            <van-cell title="药品金额" :value="`￥${orderPre.payment}`" />
            <van-cell title="运费" :value="`￥${orderPre.expressFee}`" />
            <van-cell title="优惠券" :value="`-￥${orderPre.couponDeduction}`" />
            <van-cell title="实付款" :value="`￥${orderPre.actualPayment}`" class="price" />
         </van-cell-group>
      </div>
      <div class="order-tip">
         <p class="tip"></p>
      </div>
      <van-submit-bar :price="orderPre.actualPayment * 100" button-text="立即支付" button-type="primary" text-align="left" @click="submit"></van-submit-bar>

      <pay-sheet v-model:show="show" :orderId="orderId" :payment="orderPre.actualPayment" pay-callback="order/pay/result"></pay-sheet>
   </div>

   <div class="order-pay-page" v-else>
      <nav-bar title="药品支付" />
      <van-skeleton title avatar row="2" style="margin-top: 15px" />
      <van-skeleton title row="4" style="margin-top: 50px" />
      <van-skeleton title row="4" style="margin-top: 50px" />
   </div>
</template>

<style lang="scss" scoped>
:deep(.van-nav-bar) {
   background-color: var(--cp-primary);

   .van-nav-bar__arrow,
   .van-nav-bar__title {
      color: #fff;
   }
}

:deep(.van-cell) {
   .van-cell__title {
      font-size: 16px;
   }

   .van-cell__value {
      font-size: 16px;
   }

   &.price {
      .van-cell__value {
         font-size: 18px;
         color: var(--cp-price);
      }
   }
}

:deep(.van-submit-bar) {
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);

   .van-button {
      width: 200px;
   }
}

.order-address {
   padding: 15px 15px 0 15px;
   background-color: #fff;
   font-size: 13px;

   .area {
      color: var(--cp-tag);
      margin-bottom: 5px;

      .van-icon-location {
         color: #ff7702;
         font-size: 14px;
      }
   }

   .detail {
      font-size: 17px;
      margin-bottom: 5px;
   }

   &::after {
      content: '';
      display: block;
      height: 12px;
      background-color: var(--cp-bg);
      margin: 0 -15px;
      margin-top: 15px;
   }
}

.order-medical {
   background-color: #fff;
   padding: 0 15px;

   .head {
      display: flex;
      height: 54px;
      align-items: center;

      > h3 {
         font-size: 16px;
         font-weight: normal;
      }

      > small {
         font-size: 13px;
         color: var(--cp-tag);
         margin-left: 10px;
      }
   }

   .item {
      display: flex;
      flex-wrap: wrap;
      padding: 15px 0;

      .img {
         width: 80px;
         height: 70px;
         border-radius: 2px;
         overflow: hidden;
      }

      .info {
         padding-left: 15px;
         width: 250px;

         .name {
            display: flex;
            font-size: 15px;
            margin-bottom: 5px;

            > span:first-child {
               width: 200px;
            }

            > span:last-child {
               width: 50px;
               text-align: right;
            }
         }

         .size {
            margin-bottom: 5px;

            .van-tag {
               background-color: var(--cp-primary);
               vertical-align: middle;
            }

            span:not(.van-tag) {
               margin-left: 10px;
               color: var(--cp-tag);
               vertical-align: middle;
            }
         }

         .price {
            font-size: 16px;
            color: #eb5757;
         }
      }

      .desc {
         width: 100%;
         background-color: var(--cp-bg);
         border-radius: 4px;
         margin-top: 10px;
         padding: 4px 10px;
         color: var(--cp-tip);
      }
   }
}

.order-tip {
   padding: 0 15px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 10px;

   .tip {
      font-size: 12px;
      color: var(--cp-tag);
      width: 100%;

      &::before {
         content: '*';
         color: var(--cp-price);
         font-size: 14px;
      }

      margin-bottom: 30px;
   }

   .van-checkbox {
      a {
         color: var(--cp-primary);
      }
   }
}
</style>
